<template>
	<view class="">
		<view class="scroll_header"></view>
		<view class="mt-5" :style="{height: scrollHeight}" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
			<view class="d-flex flex-column j-center a-center h_100">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="">暂无数据</view>
			</view>
		</view>
		<view class="" v-else>
			<!-- <view class="m-2 p-3 bg-white rounded-20" @click="serviceTo">
				<view class="d-flex">
					<view class="">
						<image class="mess_img rounded-20" src="../../static/images/message/icon_notification_merchant_service.png" mode=""></image>
					</view>
					<view class="flex-1 ml-2">
						<view class="d-flex j-sb a-center">
							<view class="font-weight">{{summary[0].message.title}}</view>
							<view class="text-999 font-24">{{summary[0].message.time}}</view>
						</view>
						<view class="d-flex j-sb mt-2 a-center">
							<view class="text-333 font-28 ellipsis-1 span-18">{{summary[0].message.description}}</view>
							<view class="badge font-24" v-if="summary[0].unread_count>0">{{summary[0].unread_count>=99?"99":summary[0].unread_count}}</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="m-2 p-3 bg-white rounded-20" @click="affirmTo">
				<view class="d-flex">
					<view class="">
						<image class="mess_img rounded-20" src="../../static/images/message/icon_notification_order_affirm_received.png" mode=""></image>
					</view>
					<view class="flex-1 ml-2">
						<view class="d-flex j-sb a-center">
							<view class="font-weight">{{summary[1].message.title}}</view>
							<view class="text-999 font-24">{{summary[1].message.time}}</view>
						</view>
						<view class="d-flex j-sb mt-2 a-center">
							<view class="text-333 font-28 ellipsis-1 span-18">{{summary[1].message.description}}</view>
							<view class="badge font-24" v-if="summary[1].unread_count>0">{{summary[1].unread_count>=99?"99":summary[1].unread_count}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="m-2 p-3 bg-white rounded-20" @click="payTo">
				<view class="d-flex">
					<view class="">
						<image class="mess_img rounded-20" src="../../static/images/message/icon_notification_order_pay.png" mode=""></image>
					</view>
					<view class="flex-1 ml-2">
						<view class="d-flex j-sb a-center">
							<view class="font-weight">{{summary[2].message.title}}</view>
							<view class="text-999 font-24">{{summary[2].message.time}}</view>
						</view>
						<view class="d-flex j-sb mt-2 a-center">
							<view class="text-333 font-28 ellipsis-1 span-18">{{summary[2].message.description}}</view>
							<view class="badge font-24" v-if="summary[2].unread_count>0">{{summary[2].unread_count>=99?"99":summary[2].unread_count}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="m-2 p-3 bg-white rounded-20" @click="placedTo">
				<view class="d-flex">
					<view class="">
						<image class="mess_img rounded-20" src="../../static/images/message/icon_notification_order_placed.png" mode=""></image>
					</view>
					<view class="flex-1 ml-2">
						<view class="d-flex j-sb a-center">
							<view class="font-weight">{{summary[3].message.title}}</view>
							<view class="text-999 font-24">{{summary[3].message.time}}</view>
						</view>
						<view class="d-flex j-sb mt-2 a-center">
							<view class="text-333 font-28 ellipsis-1 span-18">{{summary[3].message.description}}</view>
							<view class="badge font-24" v-if="summary[3].unread_count>0">{{summary[3].unread_count>=99?"99":summary[3].unread_count}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="m-2 p-3 bg-white rounded-20" @click="refundTo">
				<view class="d-flex">
					<view class="">
						<image class="mess_img rounded-20" src="../../static/images/message/icon_notification_order_refund_apply.png" mode=""></image>
					</view>
					<view class="flex-1 ml-2">
						<view class="d-flex j-sb a-center">
							<view class="font-weight">{{summary[4].message.title}}</view>
							<view class="text-999 font-24">{{summary[4].message.time}}</view>
						</view>
						<view class="d-flex j-sb mt-2 a-center">
							<view class="text-333 font-28 ellipsis-1 span-18">{{summary[4].message.description}}</view>
							<view class="badge font-24" v-if="summary[4].unread_count>0">{{summary[4].unread_count>=99?"99":summary[4].unread_count}}</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				summary:"", // 消息中心
				u_loadmore:true, // 加载中
				scrollHeight:0, // 屏幕高度
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			// 客服通知
			serviceTo(){
				uni.navigateTo({
					url:'/pagesA/message/service'
				})
			},
			// 签收提醒
			affirmTo(){
				uni.navigateTo({
					url:'/pagesA/message/affirm'
				})
			},
			// 客户付款
			payTo(){
				uni.navigateTo({
					url:'/pagesA/message/order_pay'
				})
			},
			// 客户下单
			placedTo(){
				uni.navigateTo({
					url:'/pagesA/message/placed'
				})
			},
			// 退款提醒
			refundTo(){
				uni.navigateTo({
					url:'/pagesA/message/refund'
				})
			}
		},
		onShow() {
			this.$H.post("v2/store/notification/summary").then(res=>{
				this.summary=res.data
				this.u_loadmore=false
			})
		},
		onLoad() {
			
		}
	}
</script>

<style>
	.mess_img{
		width: 100upx;
		height: 100upx;
	}
	.badge{
		width: 35upx;
		height: 35upx;
		background-color: #FF0000;
		color: #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
